<template>
  <div id="app">
    <router-view/>
    <toast v-model="toast.show" :type="toast.type" :time="toast.time" :position="toast.position">{{toast.text}}</toast>
    <loading :show="loading.show" :text="loading.text"></loading>
    <my-audio></my-audio>
    <!-- 更新版本弹窗 -->
    <div v-transfer-dom>
      <x-dialog v-model="showUpdateDialog" class="update-app-dialog">
        <div>
          <h3>版本更新：v{{appUpdateInfo.version}}</h3>
          <h4>更新内容：</h4>
          <p>{{appUpdateInfo.updateContent}}</p>
          <h4>更新时间：{{appUpdateInfo.updateTime | YYYYMMDD}}</h4>
        </div>
        <div class="close-wrap">
          <div class="update-later" @click="showUpdateDialog=false">暂不更新</div>
          <div class="update-now" @click="updateAppDialogClose">立即更新</div>
          <!--<span class="vux-close"></span>-->
        </div>
      </x-dialog>
    </div>
  </div>
</template>

<script>
import {
  Toast,
  Loading,
  TransferDom,
  XDialog,
  XButton
} from 'vux'
import { mapState } from 'vuex'
import MyAudio from './components/MyAudio.vue'
import versionUtils from './util/versionUtils'
import { getAppInfo } from './api/api.com'
export default {
  name: 'App',
  directives: {
    TransferDom
  },
  components: {
    Toast,
    MyAudio,
    Loading,
    XDialog,
    XButton
  },
  data () {
    return {
      showUpdateDialog: false,
      appUpdateInfo: {
        version: '',
        updateContent: '',
        updateTime: ''
      }
    }
  },
  computed: {
    ...mapState({
      toast: state => state.app.toast,
      loading: state => state.app.loading,
      showAppUpdate: state => state.app.showAppUpdate
    })
  },
  mounted () {
    versionUtils.getAppVersion().then(version => {
      getAppInfo().then(res => {
        if (res.status === 200) {
          const data = res.data[0]
          this.appUpdateInfo = data
          if (versionUtils.strVersionToNumber(this.appUpdateInfo.version) > versionUtils.strVersionToNumber(version)) {
            this.showUpdateDialog = true
          }
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    })
  },
  methods: {
    updateAppDialogClose () {
      this.showUpdateDialog = false
      versionUtils.updateApp()
    }
  }
}
</script>

<style lang="less">
  @import '~vux/src/styles/close';
  @import '~vux/src/styles/reset.less';
  .update-app-dialog{
    .update-now{
      font-weight: bold;
      color: #09BB07;
    }
    .update-later{
      color: #999999;
    }
    .weui-dialog{
      padding: 10px;
      text-align: left;
    }
    .close-wrap{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }
  }
  .vux-header{
    top: 0;
    width: 100%;
    position: fixed !important;
    z-index: 999;
  }
</style>
